<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SPIRIT</title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
    <!-- 引入重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />
    <!-- 引入公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />
    <!-- 引入首页样式 -->
    <link rel="stylesheet/less" href="./assets/css/index.less" />
    <!-- 引入动画ani -->
    <link rel="stylesheet" href="./assets/css/animate.min.css">
</head>

<body>
    <video id="background" autoplay loop muted>
        <source src="./assets/images/banner.avi">
    </video>

    <!-- 头部 -->
    <header id="header" class="header">
        <nav class="navbar navbar-inverse">
            <div class="container">
                <!-- 移动端切换导航 -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand logo wow bounceInLeft" href="javascript:void(0)">Spirit8</a>
                </div>

                <!-- 导航元素列表 -->
                <div class="menu collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a class="wow slideInDown" data-wow-delay="0ms"
                                href="#banner"><span>HOME</span></a></li>
                        <li><a class="wow slideInDown" data-wow-delay="20ms"
                                href="#about"><span>About</span></a></li>
                        <li><a class="wow slideInDown" data-wow-delay="40ms"
                                href="#teaminfo"><span>OUR TEAM</span></a></li>
                        <li><a class="wow slideInDown" data-wow-delay="60ms"
                                href="#services"><span>SERVICES</span></a></li>
                        <li><a class="wow slideInDown" data-wow-delay="80ms"
                                href="#clients"><span>CLIENTS</span></a></li>
                        <li><a class="wow slideInDown" data-wow-delay="100ms"
                                href="#ourwork"><span>WORK</span></a></li>
                        <li><a class="wow slideInDown" data-wow-delay="100ms"
                            href="#contactus"><span>CONTACT</span></a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- banner -->
    <div id="banner" class="banner">
        <div class="box">
            <div class="title wow rotateIn">wELCOME on <span>Spirit8</span></div>
            <p class="desc wow fadeInUp">
                We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span>
            </p>
            <div class="more wow fadeInUpBig">
                <a href="#footer">↓</a>
            </div>
        </div>
    </div>

    <!-- About -->
    <div id="about" class="about">
        <div class="container">
            <div class="left wow rotateInDownLeft">
                <img src="./assets/images/mac.png" alt="">
            </div>
            <div class="right">
                <div class="short wow fadeInDownBig" data-wow-delay="60ms">
                    ABOUT US
                </div>

                <div class="title wow fadeInDownBig" data-wow-delay="50ms">
                    <span>SOME</span>
                    WORDS
                    <span>ABOUT US</span>
                </div>

                <div class="content wow fadeInDownBig" data-wow-delay="40ms">
                    We love building and rebuilding brands through our specific skills. Using colour, fonts, and
                    illustration, we brand companies in a way they will never forget.
                </div>

                <ul class="videolist">
                    <li class=" wow fadeInDownBig" data-wow-delay="30ms">
                        <span class="glyphicon glyphicon-expand"></span>
                        <span>Mission - </span>
                        <span>We deliver uniqueness and quality</span>
                    </li>
                    <li class=" wow fadeInDownBig" data-wow-delay="20ms">
                        <span class="glyphicon glyphicon-expand"></span>
                        <span>Mission - </span>
                        <span>We deliver uniqueness and quality</span>
                    </li>
                    <li class=" wow fadeInDownBig" data-wow-delay="10ms">
                        <span class="glyphicon glyphicon-expand"></span>
                        <span>Mission - </span>
                        <span>We deliver uniqueness and quality</span>
                    </li>
                </ul>

                <div class="btn btn-default wow fadeInDownBig" data-wow-delay="0ms">
                    <div class="icon">
                        <img src="./assets/images/btn-icon.png" alt="">
                    </div>
                    <span>
                        <a href="javascript:void(0)">Browse our work</a>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- 头像信息 -->
    <div id="teaminfo" class="teaminfo">
        <div class="container">
            <div class="title wow fadeInUp">
                MEET
                <span>OUR</span>
                <span>TEAM</span>
            </div>
            <div id="carousel-example-generic" class="carousel slide wow fadeInUp">

                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <ul class="teamlist">
                            <li>
                                <div class="profile">
                                    <img src="" alt="">
                                </div>

                                <div class="content">
                                    <div class="name">
                                        Jason Statham
                                    </div>
                                    <div class="post">
                                        Knife designer
                                    </div>
                                    <div class="motto">
                                        Do not seek to change what has come before. Seek to create that which has not.
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="profile">
                                    <img src="" alt="">
                                </div>

                                <div class="content">
                                    <div class="name">
                                        Jason Statham
                                    </div>
                                    <div class="post">
                                        Knife designer
                                    </div>
                                    <div class="motto">
                                        Do not seek to change what has come before. Seek to create that which has not.
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="profile">
                                    <img src="" alt="">
                                </div>

                                <div class="content">
                                    <div class="name">
                                        Jason Statham
                                    </div>
                                    <div class="post">
                                        Knife designer
                                    </div>
                                    <div class="motto">
                                        Do not seek to change what has come before. Seek to create that which has not.
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="profile">
                                    <img src="" alt="">
                                </div>

                                <div class="content">
                                    <div class="name">
                                        Jason Statham
                                    </div>
                                    <div class="post">
                                        Knife designer
                                    </div>
                                    <div class="motto">
                                        Do not seek to change what has come before. Seek to create that which has not.
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="item">
                        <ul class="teamlist">
                            <li>
                                <div class="profile">
                                    <img src="" alt="">
                                </div>

                                <div class="content">
                                    <div class="name">
                                        Jason Statham
                                    </div>
                                    <div class="post">
                                        Knife designer
                                    </div>
                                    <div class="motto">
                                        Do not seek to change what has come before. Seek to create that which has not.
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="profile">
                                    <img src="" alt="">
                                </div>

                                <div class="content">
                                    <div class="name">
                                        Jason Statham
                                    </div>
                                    <div class="post">
                                        Knife designer
                                    </div>
                                    <div class="motto">
                                        Do not seek to change what has come before. Seek to create that which has not.
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="profile">
                                    <img src="" alt="">
                                </div>

                                <div class="content">
                                    <div class="name">
                                        Jason Statham
                                    </div>
                                    <div class="post">
                                        Knife designer
                                    </div>
                                    <div class="motto">
                                        Do not seek to change what has come before. Seek to create that which has not.
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="profile">
                                    <img src="" alt="">
                                </div>

                                <div class="content">
                                    <div class="name">
                                        Jason Statham
                                    </div>
                                    <div class="post">
                                        Knife designer
                                    </div>
                                    <div class="motto">
                                        Do not seek to change what has come before. Seek to create that which has not.
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="item">
                        <ul class="teamlist">
                            <li>
                                <div class="profile">
                                    <img src="" alt="">
                                </div>

                                <div class="content">
                                    <div class="name">
                                        Jason Statham
                                    </div>
                                    <div class="post">
                                        Knife designer
                                    </div>
                                    <div class="motto">
                                        Do not seek to change what has come before. Seek to create that which has not.
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="profile">
                                    <img src="" alt="">
                                </div>

                                <div class="content">
                                    <div class="name">
                                        Jason Statham
                                    </div>
                                    <div class="post">
                                        Knife designer
                                    </div>
                                    <div class="motto">
                                        Do not seek to change what has come before. Seek to create that which has not.
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="profile">
                                    <img src="" alt="">
                                </div>

                                <div class="content">
                                    <div class="name">
                                        Jason Statham
                                    </div>
                                    <div class="post">
                                        Knife designer
                                    </div>
                                    <div class="motto">
                                        Do not seek to change what has come before. Seek to create that which has not.
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="profile">
                                    <img src="" alt="">
                                </div>

                                <div class="content">
                                    <div class="name">
                                        Jason Statham
                                    </div>
                                    <div class="post">
                                        Knife designer
                                    </div>
                                    <div class="motto">
                                        Do not seek to change what has come before. Seek to create that which has not.
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <ol class="carousel-indicators pond">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="point active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1" class="point"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2" class="point"></li>
                </ol>
            </div>
            <div class="more"></div>
        </div>
    </div>

    <!-- 服务项目 -->
    <div id="services" class="services">
        <div class="container">
            <div class="title wow flipInX">
                TAKE A LOOK AT
                <span>OUR SERVICES</span>
            </div>

            <div class="introduction wow flipInX">
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                from a line in section 1.10.32.
            </div>

            <ul class="infolist">
                <li>
                    <div class="icon wow rotateIn">
                        <img src="./assets/images/web.png" alt="">
                    </div>

                    <div class="liright wow fadeInRight">
                        <div class="service">WEB DESIGN</div>
                        <div class="info">
                            The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.
                        </div>
                    </div>

                </li>
                <li>
                    <div class="icon wow rotateIn">
                        <img src="./assets/images/mobile.png" alt="">
                    </div>

                    <div class="liright wow fadeInRight">
                        <div class="service">MOBILE APPS</div>
                        <div class="info">
                            The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.
                        </div>
                    </div>

                </li>
                <li>
                    <div class="icon wow rotateIn">
                        <img src="./assets/images/photo.png" alt="">
                    </div>

                    <div class="liright wow fadeInRight">
                        <div class="service">PHOTOGRAPHY</div>
                        <div class="info">
                            The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.
                        </div>
                    </div>

                </li>
                <li>
                    <div class="icon wow rotateIn">
                        <img src="./assets/images/marketing.png" alt="">
                    </div>

                    <div class="liright wow fadeInRight">
                        <div class="service">MARKETING</div>
                        <div class="info">
                            The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.
                        </div>
                    </div>

                </li>
            </ul>
        </div>
    </div>

    <!-- 合作 -->
    <div id="clients" class="clients">
        <div class="container">
            <div class="title wow fadeInUp">
                SOME OF
                <span>OUR</span>
                <span>CLIENTS</span>
            </div>

            <div id="carousel-example-generica" class="carousel slide wow fadeInUp">
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generica" data-slide-to="0" class="point active"></li>
                    <li data-target="#carousel-example-generica" class="point" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generica" class="point" data-slide-to="2"></li>
                </ol>

                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <ul class="listclients">
                            <li><img src="./assets/images/chanel.png" alt=""></li>
                            <li><img src="./assets/images/zara.png" alt=""></li>
                            <li><img src="./assets/images/guerlain.png" alt=""></li>
                            <li><img src="./assets/images/lancome.png" alt=""></li>
                            <li><img src="./assets/images/lacoste.png" alt=""></li>
                        </ul>
                    </div>
                    <div class="item">
                        <ul class="listclients">
                            <li><img src="./assets/images/chanel.png" alt=""></li>
                            <li><img src="./assets/images/zara.png" alt=""></li>
                            <li><img src="./assets/images/guerlain.png" alt=""></li>
                            <li><img src="./assets/images/lancome.png" alt=""></li>
                            <li><img src="./assets/images/lacoste.png" alt=""></li>
                        </ul>
                    </div>
                    <div class="item">
                        <ul class="listclients">
                            <li><img src="./assets/images/chanel.png" alt=""></li>
                            <li><img src="./assets/images/zara.png" alt=""></li>
                            <li><img src="./assets/images/guerlain.png" alt=""></li>
                            <li><img src="./assets/images/lancome.png" alt=""></li>
                            <li><img src="./assets/images/lacoste.png" alt=""></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="more"></div>
        </div>
    </div>

    <!-- ourwork -->
    <div id="ourwork" class="ourwork">
        <div class="container">
            <div class="title">
                take a look at
                <span>our work</span>
            </div>

            <p class="info">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
                Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics,
                very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                comes from a line in section 1.10.32.</p>

            <div class="work">
                <div class="top">
                    <div class="left">Filter by type</div>
                    <div class="right">
                        <div class="pc-right">
                            <a href="javascript:void(0)">All</a>
                            <a href="javascript:void(0)">Web design</a>
                            <a href="javascript:void(0)">Mobile design</a>
                            <a href="javascript:void(0)">Photograpy</a>
                        </div>
                        <div class="mobile-right">
                            <div class="dropdown">
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    All
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                                    <li><a href="javascript:void(0)">All</a></li>
                                    <li><a href="javascript:void(0)">Web design</a></li>
                                    <li><a href="javascript:void(0)">Mobile design</a></li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="list">
                    <ul>
                        <li class="imglist">
                            <div class="images">
                                <img src="./assets/images/Layer 77.png" alt="">
                                <div class="moreinfo">
                                    <div class="name">
                                        Trend and fashion
                                    </div>
                                    <div class="author">
                                        Website design
                                    </div>
                                    <img src="./assets/images/more.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li class="imglist">
                            <div class="images">
                                <img src="./assets/images/Layer 77.png" alt="">
                                <div class="moreinfo">
                                    <div class="name">
                                        Trend and fashion
                                    </div>
                                    <div class="author">
                                        Website design
                                    </div>
                                    <img src="./assets/images/more.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li class="imglist">
                            <div class="images">
                                <img src="./assets/images/Layer 77.png" alt="">
                                <div class="moreinfo">
                                    <div class="name">
                                        Trend and fashion
                                    </div>
                                    <div class="author">
                                        Website design
                                    </div>
                                    <img src="./assets/images/more.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li class="imglist">
                            <div class="images">
                                <img src="./assets/images/Layer 77.png" alt="">
                                <div class="moreinfo">
                                    <div class="name">
                                        Trend and fashion
                                    </div>
                                    <div class="author">
                                        Website design
                                    </div>
                                    <img src="./assets/images/more.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li class="imglist">
                            <div class="images">
                                <img src="./assets/images/Layer 82.png" alt="">
                                <div class="moreinfo">
                                    <div class="name">
                                        Trend and fashion
                                    </div>
                                    <div class="author">
                                        Website design
                                    </div>
                                    <img src="./assets/images/more.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li class="imglist">
                            <div class="images">
                                <img src="./assets/images/Layer 82.png" alt="">
                                <div class="moreinfo">
                                    <div class="name">
                                        Trend and fashion
                                    </div>
                                    <div class="author">
                                        Website design
                                    </div>
                                    <img src="./assets/images/more.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li class="imglist">
                            <div class="images">
                                <img src="./assets/images/Layer 82.png" alt="">
                                <div class="moreinfo">
                                    <div class="name">
                                        Trend and fashion
                                    </div>
                                    <div class="author">
                                        Website design
                                    </div>
                                    <img src="./assets/images/more.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li class="imglist">
                            <div class="images">
                                <img src="./assets/images/Layer 82.png" alt="">
                                <div class="moreinfo">
                                    <div class="name">
                                        Trend and fashion
                                    </div>
                                    <div class="author">
                                        Website design
                                    </div>
                                    <img src="./assets/images/more.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li class="imglist">
                            <div class="images">
                                <img src="./assets/images/Layer 83.png" alt="">
                                <div class="moreinfo">
                                    <div class="name">
                                        Trend and fashion
                                    </div>
                                    <div class="author">
                                        Website design
                                    </div>
                                    <img src="./assets/images/more.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li class="imglist">
                            <div class="images">
                                <img src="./assets/images/Layer 83.png" alt="">
                                <div class="moreinfo">
                                    <div class="name">
                                        Trend and fashion
                                    </div>
                                    <div class="author">
                                        Website design
                                    </div>
                                    <img src="./assets/images/more.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li class="imglist">
                            <div class="images">
                                <img src="./assets/images/Layer 83.png" alt="">
                                <div class="moreinfo">
                                    <div class="name">
                                        Trend and fashion
                                    </div>
                                    <div class="author">
                                        Website design
                                    </div>
                                    <img src="./assets/images/more.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li class="imglist">
                            <div class="images">
                                <img src="./assets/images/Layer 83.png" alt="">
                                <div class="moreinfo">
                                    <div class="name">
                                        Trend and fashion
                                    </div>
                                    <div class="author">
                                        Website design
                                    </div>
                                    <img src="./assets/images/more.png" alt="">
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- testimonials -->
    <div id="testimonials" class="testimonials">
        <div class="container">
            <div class="title wow fadeInUp">
                <span>our clients’ </span>testimonials
            </div>

            <div id="carousel-example-genericb" class="carousel slide wow fadeInUp">
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-genericb" data-slide-to="0" class="point active"></li>
                    <li data-target="#carousel-example-genericb" class="point" data-slide-to="1"></li>
                    <li data-target="#carousel-example-genericb" class="point" data-slide-to="2"></li>
                </ol>

                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <div class="infom">
                            <p class="info">This book is a treatise on the theory of ethics, very popular during the
                                Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                                line in section 1.10.32.</p>

                            <div class="author">
                                <span>Dean Martin,</span>
                                CEO Acme Inc.
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="infom">
                            <p class="info">This book is a treatise on the theory of ethics, very popular during the
                                Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                                line in section 1.10.32.</p>

                            <div class="author">
                                <span>Dean Martin,</span>
                                CEO Acme Inc.
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="infom">
                            <p class="info">This book is a treatise on the theory of ethics, very popular during the
                                Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                                line in section 1.10.32.</p>

                            <div class="author">
                                <span>Dean Martin,</span>
                                CEO Acme Inc.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="more"></div>
        </div>
    </div>

    <!-- 联系我们 -->
    <div id="contactus" class="contactus">
        <div class="container">
            <div class="title">
                FEEL FREE TO
                <span>CONTACT US</span>
            </div>

            <p class="info">
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                popular during the Renaissance.
            </p>

            <div class="contact">
                <div class="userinfo">
                    <div class="name">
                        <div class="top">
                            <span>Name</span>
                            <sup>*</sup>
                        </div>
                        <div class="bottom">
                            <input type="text" name="username" required placeholder="请输入您的姓名">
                        </div>
                    </div>
                    <div class="email">
                        <div class="top">
                            <span>Email address</span>
                            <sup>*</sup>
                        </div>
                        <div class="bottom">
                            <input type="email" name="email" required placeholder="请输入您的邮箱">
                        </div>
                    </div>
                </div>
                <div class="message">
                    <div class="top">
                        <span>Message</span>
                        <sup>*</sup>
                    </div>
                    <div class="bottom">
                        <textarea name="message" rows="8" placeholder="请输入留言内容" required></textarea>
                    </div>
                </div>
                <div class="send">
                    <button type="button">SEND</button>
                </div>
            </div>

        </div>
    </div>

    <!-- footer -->
    <footer id="footer" class="footer">
        <div class="container">
            <div class="box">
                <div class="copyright wow fadeInUp">ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8</div>
                <div class="links">
                    <a class="wow fadeInUp" data-wow-delay="100ms" href="javascript:void(0)">
                        <img src="./assets/images/footer1.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="200ms" href="javascript:void(0)">
                        <img src="./assets/images/footer2.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="300ms" href="javascript:void(0)">
                        <img src="./assets/images/footer3.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="400ms" href="javascript:void(0)">
                        <img src="./assets/images/footer4.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="500ms" href="javascript:void(0)">
                        <img src="./assets/images/footer5.png" />
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部 -->
    <div id="back">
        <a href="#banner" id="gotop">
            <img src="./assets/images/top.svg" />
        </a>
    </div>

</body>

</html>
<!-- jquery -->
<script src="./assets/js/jquery.min.js"></script>
<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>
<!-- 解析less插件 -->
<script src="./assets/js/less.min.js"></script>
<!-- 懒加载插件 -->
<script src="./assets/js/wow.min.repeat.js"></script>

<script>
    var background = document.getElementById("background")

    background.playbackRate = 10

    new WOW().init()

    // 给页面绑定一个监听滚动条变化的事件
    $(document).scroll(function () {
        //获取拉动的距离
        var distance = $(this).scrollTop()

        // 当前滚动条的值只要大于10px 就给导航条添加背景色
        if (distance > 50) {
            $("header").css({
                "backgroundColor": "#111111",
                paddingBottom: 0
            })

            $("#gotop").css({zIndex:99998,opacity:1})
        } else {
            $("header").css({
                "backgroundColor": "transparent",
                paddingBottom: '1em'
            })
            $("#gotop").css({zIndex:-99998,opacity:0})
        }
    })


    $("#back a,.menu a,#banner a,.logo").click(function(){
        var LocationReplace = location.pathname.replace(/^\//,'')
        var CurrentReplace = this.pathname.replace(/^\//,'')

        var LocationHostname = location.hostname
        var CurrentHostname = this.hostname

        if(LocationReplace == CurrentReplace && LocationHostname == CurrentHostname)
        {
            var $target = $(this.hash)

            if($target.length > 0){
                var pos = $target.offset().top

                $("html,body").animate({
                    scrollTop:pos
                },1000)
            }

            return false
        }
    })



</script>